<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end" style="margin-bottom:20px">
          <el-button type="primary" @click="addP(1,'0')">添加页面权限</el-button>
        </el-row>

        <el-table :data="tableDate" border row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作" width="210px">
            <template v-slot="{row}">
              <el-row type="flex" justify="space-around">
                <el-link v-if="row.type === 1" type="primary" @click="addP(2,row.id)">添加</el-link>
                <el-link type="primary" @click="editP(row.id)">编辑</el-link>
                <el-link type="primary" @click="deleteP(row.id)">删除</el-link>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      :title="isEdit? '编辑': '新增'"
      :visible.sync="dialogVisible"
      @close="closeDialogCB"
    >
      <el-form ref="formPer" label-width="100px" :model="formDate">
        <el-form-item label="权限名称">
          <el-input v-model="formDate.name" />
        </el-form-item>

        <el-form-item label="权限标识">
          <el-input v-model="formDate.code" />
        </el-form-item>

        <el-form-item label="权限描述">
          <el-input v-model="formDate.description" />
        </el-form-item>

        <el-form-item label="权限描述">
          <el-switch
            v-model="formDate.enVisible"
            active-text="启用"
            inactive-text="不启用"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryAllPermissions,
  addPermission,
  deletePermissionById,
  queryPermissionINfoById,
  updatePermissionById
} from '@/api/permissions'

import { array2Tree } from '@/utils'
export default {
  name: '',
  data() {
    return {
      tableDate: ['1'],
      // 弹窗控制器
      dialogVisible: false,
      // 表单数据
      formDate: {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        pid: '',
        type: ''
      },
      // 是否为编辑状态
      isEdit: false

    }
  },
  created() {
    this.getAllPermissios()
  },
  methods: {
    // ! 1.获取全部的权限
    async getAllPermissios() {
      const res = await queryAllPermissions()
      console.log(res)
      this.tableDate = array2Tree(res.data, '0')
    },
    // ! 提交订单
    async hSubmit() {
      const res = this.isEdit ? await updatePermissionById(this.formDate) : await addPermission(this.formDate)
      this.$message.success(res.message)
      // 关闭弹窗 刷新列表
      this.dialogVisible = false
      this.getAllPermissios()
    },
    // ! 3.删除
    deleteP(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deletePermissionById(id)
        // 更新列表
        this.getAllPermissios()
        this.$message({
          type: 'success',
          message: res.message
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // * 打开弹窗 需要为添加指定类型和 添加的权限上级的id
    addP(type, pid) {
      // console.log('输出 (→_→) addP (→_→) pid', pid)
      // console.log('输出 (→_→) addP (→_→) type', type)
      this.formDate.pid = pid
      this.formDate.type = type

      this.isEdit = false
      this.dialogVisible = true
    },
    // * 编辑弹窗
    async editP(id) {
      console.log(id)
      // 获取到指定id权限点详情
      const res = await queryPermissionINfoById(id)
      this.formDate = { ...res.data }
      this.isEdit = true
      this.dialogVisible = true
    },

    // 关闭弹窗的回调
    closeDialogCB() {
      // 清空data数据
      this.formDate = {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        pid: '',
        type: ''
      }
      // 2. 清空校验
      this.$refs.formPer.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
